<template>
    <div class="main">
        <a-form id="formLogin" class="user-layout-login" ref="formLogin" :form="form" @submit="handleSubmit">
            <a-tabs
                :activeKey="customActiveKey"
                :tabBarStyle="{ textAlign: 'center', borderBottom: 'unset' }"
                @change="handleTabClick"
            >
                <a-tab-pane key="tab1" :tab="$t('user.login.tab-login-credentials')">
                    <a-alert
                        v-if="isLoginError"
                        type="error"
                        showIcon
                        style="margin-bottom: 24px"
                        message="用户名或密码错误"
                    />
                    <a-form-item>
                        <a-input
                            size="large"
                            type="text"
                            placeholder="请输入用户名/手机号"
                            v-decorator="[
                                'mobile',
                                {
                                    rules: [{ required: true, message: '请输入用户名/手机号' }],
                                    validateTrigger: 'change',
                                },
                            ]"
                        >
                            <a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }" />
                        </a-input>
                    </a-form-item>

                    <a-form-item>
                        <a-input-password
                            size="large"
                            placeholder="请输入密码"
                            v-decorator="[
                                'pwd',
                                {
                                    rules: [{ required: true, message: '请输入密码' }],
                                    validateTrigger: 'blur',
                                },
                            ]"
                        >
                            <a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }" />
                        </a-input-password>
                    </a-form-item>
                </a-tab-pane>
            </a-tabs>

            <a-form-item style="margin-top: 24px">
                <a-button
                    size="large"
                    type="primary"
                    htmlType="submit"
                    class="login-button"
                    :loading="state.loginBtn"
                    :disabled="state.loginBtn"
                    >{{ $t('user.login.login') }}</a-button
                >
            </a-form-item>
        </a-form>
    </div>
</template>

<script>
import md5 from 'md5'
import { mapActions } from 'vuex'
import { timeFix } from '@/utils/util'
import { getSmsCaptcha } from '@/api/login'

export default {
    data() {
        return {
            customActiveKey: 'tab1',
            loginBtn: false,
            isLoginError: false,
            form: this.$form.createForm(this),
            state: {
                time: 60,
                loginBtn: false,
                smsSendBtn: false,
            },
        }
    },
    methods: {
        ...mapActions(['Login', 'Logout']),
        handleTabClick(key) {
            this.customActiveKey = key
            // this.form.resetFields()
        },
        handleSubmit(e) {
            e.preventDefault()
            const {
                form: { validateFields },
                state,
                Login,
            } = this

            const validateFieldsKey = ['mobile', 'pwd']

            validateFields(validateFieldsKey, { force: true }, (err, values) => {
                if (!err) {
                    state.loginBtn = true
                    Login(values)
                        .then((res) => this.loginSuccess(res))
                        .catch((err) => this.requestFailed(err))
                        .finally(() => {
                            state.loginBtn = false
                        })
                }
            })
        },
        loginSuccess(res) {
            this.$router.push({ path: '/' })
            // 延迟 1 秒显示欢迎信息
            setTimeout(() => {
                this.$notification.success({
                    message: '欢迎',
                    description: `${timeFix()}，欢迎回来`,
                })
            }, 1000)
            this.isLoginError = false
        },
        requestFailed(err) {
            this.isLoginError = true
        },
    },
}
</script>

<style lang="less" scoped>
.user-layout-login {
    label {
        font-size: 14px;
    }

    .getCaptcha {
        display: block;
        width: 100%;
        height: 40px;
    }

    .forge-password {
        font-size: 14px;
    }

    button.login-button {
        padding: 0 15px;
        font-size: 16px;
        height: 40px;
        width: 100%;
    }
}
</style>
